<template>
  <div class="min-h-screen bg-gray-50 dark:bg-gray-900 flex items-center justify-center px-4">
    <div class="max-w-lg w-full text-center">
      <div class="text-6xl font-bold text-primary-600 dark:text-primary-400 mb-8">
        404
      </div>
      <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
        页面未找到
      </h1>
      <p class="text-xl text-gray-600 dark:text-gray-300 mb-8">
        抱歉，您访问的页面不存在或已被移除
      </p>
      <div class="space-x-4">
        <router-link 
          to="/" 
          class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors"
        >
          返回首页
        </router-link>
        <button 
          @click="goBack" 
          class="inline-flex items-center px-6 py-3 border border-gray-300 dark:border-gray-600 text-base font-medium rounded-md text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 transition-colors"
        >
          返回上一页
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
  router.back()
}
</script>
